<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item
                                :to="{ path: 'exam/question/detailBank/:id' }">题库管理·题库详情</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <el-descriptions :loading="loading" border direction="vertical" v-loading="loading" title="新增题库" :column="2">
                    <template #extra>
                        <el-button color="#0EA06F" size="large" style="width: 10vh;" type="primary" @click="revise"
                            :disabled="tabData.isPublish == 0 ? disabled = false : disabled = true">{{ choice == false ?
                                "修改" : "确认修改" }}</el-button>
                    </template>
                    <el-descriptions-item label="题库名称" label-class-name="my-label" class-name="my-content">
                        <el-input v-model="tabData.name" :disabled="choice == false ? disabled = true : disabled = false"
                            style="width: 40vh;" placeholder="请输入题库名称" />
                    </el-descriptions-item>
                    <el-descriptions-item label="难度">
                        <el-input-number v-model="tabData.lv"
                            :disabled="choice == false ? disabled = true : disabled = false" style="width:40vh" :min="1"
                            :max="10" />
                    </el-descriptions-item>
                    <el-descriptions-item label="标签" :span=2 width="150px" align="left">
                        <el-tag v-if="choice == false">{{ tabData.labels }}</el-tag>
                        <el-checkbox v-else style="width: 7vh;" @change="(val) => check(val, item)"
                            v-for="(item, index) in checkList" :key="index" :label="item">
                            {{ item }}
                        </el-checkbox>
                    </el-descriptions-item>
                    <el-descriptions-item label="描述" :span=2 align="left">
                        <el-input v-model="tabData.explain" :disabled="choice == false ? disabled = true : disabled = false"
                            :rows="2" type="textarea" placeholder="题库描述" />
                    </el-descriptions-item>
                    <el-descriptions-item label="题目数量" label-class-name="my-label" class-name="my-content">
                        <el-tag>{{ tabData.count }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="添加时间">
                        <el-tag>{{ tabData.createTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="发布" label-class-name="my-label" class-name="my-content">
                        <el-tag class="ml-2" :type="tabData.isPublish == 0 ? 'success' : 'danger'">
                            {{ tabData.isPublish == 0 ? '是' : '否' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="禁用">
                        <el-tag class="ml-2" :type="tabData.isBan == 0 ? 'success' : 'danger'">{{ tabData.isBan == 0 ? '否' :
                            '是' }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypedetailDto } from '../../../type/question'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetSingleQuestionBank, GetLabels, UpdateQuestionBank } from '../../../api/question/question'
import { ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();
        const route = useRoute();

        const data = reactive<TypedetailDto>({
            labels: [],      //标签
            parentid: '',    //父id
            loading: true,   //加载
            checkList: [],   //多选框
            disabled: true,  //是否禁用
            id: '',          //详细题库id
            choice: false,    //是否修改

            tabData: []      //显示的数据
        })



        const events = {
            goBack() {
                window.history.go(-1)
            },

            // 修改
            revise() {
                if (data.choice == false) {
                    data.choice = true
                } else {
                    data.loading=true
                    data.choice=true
                    UpdateQuestionBank({
                        explain: data.tabData.explain,
                        name: data.tabData.name,
                        id: route.params.id,
                        labels: data.labels,
                        lv: data.tabData.lv
                    }).then((res: any) => {
                        if (res.result == 0) {
                            data.loading=false
                            ElNotification({
                                title: '修改成功',
                                type: 'success',
                            })
                            router.push('/exam/question')
                        } else {
                            ElNotification({
                                title: '修改失败',
                                type: 'warning',
                            })
                        }

                    })
                }
            },

            // 标签事件
            check(val: any, item: any) {
                if (val == false) {
                    data.labels.splice(item, 1)
                } else {
                    data.labels.push(item)
                }
            },

            //查询题目
            bind() {
                GetSingleQuestionBank({
                    id: route.params.id
                }).then((res: any) => {
                    data.loading = false
                    data.tabData = res.data
                })
            },

            // 获取标签
            GetLabel() {
                GetLabels({}).then((res: any) => {
                    if (res.result == 0) {
                        data.checkList = res.data
                        data.loading = false
                    }
                })
            }

        }


        onMounted(() => {
            events.GetLabel()
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    height: 70vh;
    border-radius: 5px;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}</style>
